<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script src="/nowjs/now.js"></script>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


        <script type="text/javascript">
            <!--
            /**
             * @author Patrick Poulain
             * @see http://petitchevalroux.net
             * @licence GPL
             * 
             * Modifie la classe css d'un element HTML
             *
             * @param string elementId identifiant de l'element html
             * @param string class nom de la nouvelle classe css
             * @return boolean true en cas de succés false en cas d'echec
             **/
            function setClass(elementId,classe)
            {
                /*On recupere l'element html dans le document*/
                var e = document.getElementById(elementId);
                /*Si on a trouver l'element on modifie sa classe css*/
                if(e != null)
                {
                    e.className = classe;
                    return true;
                }
                /*On a pas trouver l'element c'est un echec*/
                return false;
            }
            //-->
        </script>   

        <meta charset="utf-8">
        <link rel="stylesheet" href="paint.css" />
        <title>Canvas Paint</title>

        <meta property="og:title" content="Paint Miage" />
        <meta property="og:description" content="Paint Miage is a new platform about draw discovery for young people in the world."/>
        <meta property="og:image" content="thumbnail_image" />
        <meta property="og:url" content="http://floating-river-6741.herokuapp.com">

    </head>

    <body> 



        <div id="header">
            Paint Canvas 

            <!--        griser
                    http://dev.petitchevalroux.net/javascript/modifier-classe-css-element-javascript.188.html-->

            <!--<div id="madiv" style="width:100px;height:100px;" class="divGreen" onmouseover="setClass('madiv','divBlue');" onmouseout="setClass('madiv','divGreen');">&nbsp;</div>-->

            <a class="info" href="#"  onmouseover="setClass('body','bodyOpac');" onmouseout="setClass('body','bodyNonOpac');">
                <img src="img/bulleInfo.png"/>
                <span>
                    Ce site a été crée dans le cadre d'un projet de master 1 MIAGE par :
                    <ul>
                        <li>Lionel Giroud d'Argoud,</li>
                        <li>Aurélie Folacci,</li>
                        <li>Sophie Tournès.</li>
                    </ul>

                    Il permet de dessiner et de parler entre plusieurs utilisateurs connectés.<br /><br /> 
                    <i>Si ce site vous plait, vous pouvez le partager sur facebook à vos amis grâce au bouton "share".</i><br />
                </span>
            </a>
            
            <a href="readme.html" class="myButton">About</a>
        </div>

        <div id="body" class="bodyNonOpac">


            <div id="content">
                <div id="options">
                    <!--                <p>-->
                    <!--                    <label>-->

                    <table>
                        <tr>
                            <td> <input type="image" src="img/rectangle.png" id="rectangle" value="rect"> </td>
                            <td></td>
                            <td> <input type="image" src="img/pinceaux.png" id="pinceaux" value="pencil"> </td>
                            <td></td>
                            <td> <input type="image" src="img/cercle.png" id="cercle" value="circle"> </td>
                            <td></td>
                            <td> <input type="image" src="img/ligne.png" id="ligne" value="line"></td>
                            <td></td>
                            <td> <input type="image" src="img/gomme.png" id="gomme" value="gomme"> </td>
                        </tr>
                    </table>

                    <table>
                        <tr>  

                            <td> <a href="#" value="cadre1" id="cadre1"  class="myButton"> cadre1</a> </td>  
                            <td> <a href="#" value="cadre1" id="cadre2"  class="myButton"> cadre2</a> </td>
                            <td> <a href="#" value="cadre1" id="cadre3"  class="myButton"> cadre3</a> </td>
                        </tr>
                    </table>


                    </label>


                    <p>
                        <label>Epaisseur : <input id="epaisseur" type="range" min="1" max="10" value="2"></label>
                    </p>

                    <p> Palette : <input class="color" id="couleur" value="000000"></p>
                    <table>
                        <tr>
                            <td><a href="#" value="effacer" id="reset" class="erase">Clear</a></td>
                            <td><input type="image" id="save" src="img/save.png" value="Sauvergarder mon image" /></td>
                        </tr>


          </table>
                </div>


                <div id="container">
                    <canvas id="imageView" width="700" height="550">
                        <p>Unfortunately, your browser is currently unsupported by our web
                            application.  We are sorry for the inconvenience. Please use one of the
                            supported browsers listed below, or draw the image you want using an
                            offline tool.</p>
                        <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a
                                href="http://www.mozilla.com">Firefox</a>, <a
                                href="http://www.apple.com/safari">Safari</a>, and <a
                                href="http://www.konqueror.org">Konqueror</a>.</p>
                    </canvas>
                    
                    <a name="fb_share" type="button_count" share_url="http://floating-river-6741.herokuapp.com?miage=master1"></a>  
                    
                </div>






                <div id="chat">
                    <div id="messages">

                    </div>

                    <div id="footerChat">
                        <form action="" onsubmit="return false;">
                            <input type="text" id="text-input">
                            <input type="submit" value="Send" id="send-button">
                        </form>
                    </div>
                </div>

                <script type="text/javascript" src="paint.js"></script>
                <script type="text/javascript" src="jscolor.js"></script>

            </div>

        </div>
    </body>
</html>

